<template>
    <div class="my-statement">
        <div style="margin-top: -30px;background: #ffffff;height: 70px;padding-left: 10px;padding-top: 20px">
            <p>您当前所在位置：<b>商品详情</b></p>
            <el-button slot="reference" type="text" size="small" style="float: right;margin-right: 10px;background: #f2f2f2;width: 80px;height: 36px;color: #2D2D2D;margin-top: -40px" @click="back_top">返回</el-button>
        </div>

        <div style="height: 488px;background: #fff;margin-top: 30px;padding: 26px">
            <div style="width: 32%;float: left;background-color: #f2f2f2;height: 420px">
                <img :src="goods_main_img" width="100%" height="100%" alt="">
            </div>
            <div style="width: 62%;float: left;padding-left: 36px">
                <div style="width: 100%;font-size: 24px;color: #2D2D2D;font-weight: bolder;">{{goods_name}}</div>
                <div style="width: 100%;height:60px;background-color: #f2f2f2;clear: both;margin-top: 20px;">
                   <span style="margin-left: 17px;line-height: 60px;font-size: 16px;color: #2d2d2d;">商品单价：</span>
                   <span style="line-height: 60px;font-size: 26px;color: #ea0e0e;">￥{{goods_price}}</span>
                   <span style="margin-left: 8px;line-height: 60px;font-size: 17px;color: #2d2d2d;">/件</span>
                </div>
                <!--下面参数内容-->
                <div style="width: 100%;margin-top: 26px">
                    <div class="left_class" style="width: 48%;height:200px;float: left;">
                      <p class="goods_p">商品编号：{{goods_code}}</p>
                      <p class="goods_p">供应商商品编号：{{supplier_goods_cdoe}}</p>
                      <p class="goods_p">性别：{{sex}}</p>
                      <p class="goods_p">供应商：{{supplier_name}}</p>
                      <p class="goods_p">供应商编号：{{supplier_code}}</p>
                    </div>
                    <div style="background-color: #f2f2f2;width: 2px;height: 200px;float: left"></div>
                    <div class="right_class" style="width: 48%;float: left;">
<!--                        <p class="goods_p">阶梯价：</p>-->
                        <div style="width: 100%;clear: both;">
                            <span class="goods_p" style="float: left">阶梯价：</span>
                        </div>

                        <div style="width: 100%;clear: both;padding-top: 6px"
                             v-for="(item, key) in price_intervallist"
                             :key="item.id">
                            <span class="goods_p" style="float: left">{{item.min}}件 -- {{item.max}}件</span>
                            <span class="goods_p" style="float: right">{{item.price}}元</span>
                        </div>

                        <div style="width: 100%;clear: both;padding-top: 26px;text-align: center" v-show="this.is_show==1">
                            <span class="goods_p">该商品暂无阶梯价</span>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <!--规格尺码-->
        <div style="background: #fff;margin-top: 20px;">
           <div style="background-color: #fcf6f6;height: 45px;">
              <div style="width: 5px;height: 45px;background-color: #2D2D2D;float: left"/>
               <span class="goods_title">规格尺码</span>
           </div>
            <div style="background-color: #ffffff;width: 100%;clear: both;padding: 26px">
                <el-table :data="guige_datalist" style="width: 100%" :border="true"
                          :header-cell-style="{'text-align':'center'}"
                          :cell-style="{'text-align':'center'}">
                    <el-table-column prop="specificationsName" label="全部规格"></el-table-column>
                    <el-table-column prop="sizeName" label="全部尺寸"></el-table-column>
                    <el-table-column prop="newCount" label="库存"></el-table-column>
                    <el-table-column prop="buy_num" label="操作">
                        <template slot-scope="props">
                            <el-input-number v-model="props.row.buynum" @change="handleChangeBuynum(props.row.id,props.row.buynum)" :min="0" :max="100" label="请输入购买数量"></el-input-number>
                        </template>
                    </el-table-column>
                </el-table>

                <div style="width: 100%;clear: both;height: 60px">
                    <span class="goods_text">数量小计：</span>
                    <span class="godds_red">{{buy_sum}}</span>
                    <span class="goods_text">款</span>
                    <span class="goods_text" style="margin-left: 26px">金额小计：</span>
                    <span class="godds_red">{{sum_money}}</span>
                    <span class="goods_text">元</span>
                    <button class="submit_cart" @click="add_cart">加入购物车</button>
                </div>
            </div>
        </div>

        <!--商品参数-->
        <div style="background: #fff;margin-top: 20px;">
            <div style="background-color: #fcf6f6;height: 45px;">
                <div style="width: 5px;height: 45px;background-color: #2D2D2D;float: left"/>
                <span class="goods_title">商品参数</span>
            </div>
            <div style="background-color: #ffffff;width: 100%;clear: both;padding: 26px">
                <el-table :data="parameter_listData" border style="width: 100%">
                    <el-table-column
                            prop="parameterName"
                            label="参数名称">
                    </el-table-column>
                    <el-table-column
                            prop="inputValue"
                            label="参数值"
                            >
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </div>
</template>

<script>
    import Qs from "qs";
    import { postAction } from '@/api/manage'
    export default {
        data() {
            return {
                is_value:0,//该商品是否有规格：0没有，1有
                is_show:0,//0隐藏，1出现
                buy_sum:0,//购买总数
                sum_money:'0.00',//最终总价格
                goods_main_img:'',//商品主图
                goods_name:'罗蒙高档宴会条纹男士西服三件套正装伴新郎婚礼服西装男套装',
                goods_price:'0.00',
                goods_code:'WRNER56851565',
                supplier_goods_cdoe:'GIYNLS5131564',
                sex:'男',
                supplier_name:'潮流服饰店',
                supplier_code:'GIYNSAHNG001',
                series_id:'',//系列id
                cart_pinjie:'',//传给后台拼接的字符串
                add_cart_canshu:[],//传给后台-以数组形式
                price_intervallist:[],//价格区间
                guige_datalist:[],//规格尺码
                parameter_listData: []//商品参数
            };
        },
        created() {
            this.getgoodsDetail()//商品详情
            this.getgoods_specifications();//商品下的规格
            this.getgoods_Parameter();//商品下的参数
        },
        methods: {
            handleChangeBuynum(id,buynum){//每个输入的购买数量
                // // 拼接方法
                // let arr='';
                // this.buy_sum=0;
                // this.guige_datalist.map(d=>{
                //     this.buy_sum+=d.buynum;
                //     if(arr == ''){
                //         arr = d.buynum+"&"+d.id+"/"+d.specificationsId+"?"+d.sizeId
                //     }else{
                //         arr += ","+d.buynum+"&"+d.id+"/"+d.specificationsId+"?"+d.sizeId
                //     }
                // })
                // this.cart_pinjie = arr;
                // console.log("最终拼接："+this.cart_pinjie);
                var partTInfArr = new Array;
                var partTInfStr = {};
                // 数组方法-传值给后台
                this.buy_sum=0;
                this.guige_datalist.map(d=>{
                    this.buy_sum+=d.buynum;
                    partTInfStr.kucunBathId=d.id;
                    partTInfStr.goodsSpecificationsId=d.specificationsId;
                    partTInfStr.goodsSizeId = d.sizeId;
                    partTInfStr.buyNum = d.buynum;
                    partTInfStr.goodsId = this.$route.query.goods_id;
                    partTInfArr.push(JSON.stringify(partTInfStr));
                })
                this.add_cart_canshu=JSON.stringify(partTInfArr);
                // console.log("最终传值：==="+this.add_cart_canshu);
                this.getgoods_buySumMoney(this.buy_sum);
            },
            // 加载页面数据的方法-商品详情
            getgoodsDetail(){
                let params1 = {
                    goods_id:this.$route.query.goods_id
                };
                postAction(domain.publicUrl+"/logic/interface/query_goods_detail",Qs.stringify(params1)).then(res=>{
                    let result = res.data;
                    if(result.code==0){
                        this.goods_name = result.data.goodsName;
                        this.goods_code = result.data.goodsCode;
                        this.supplier_goods_cdoe = result.data.supplierGoodsCode;
                        this.supplier_name = result.data.supplierName;
                        this.supplier_code = result.data.supplierId;
                        this.goods_main_img = result.data.goodsMainImg;
                        if(result.data.price==null || result.data.price=='' || result.data.price==undefined){
                            this.goods_price = '0.00';
                        }else {
                            this.goods_price = result.data.price;
                        }
                        if(result.data.sex==0){
                            this.sex = '男';
                        }else {
                            this.sex = '女';
                        }
                        this.series_id = result.data.goodsSeriesId;
                        //获取商品的价格区间
                        this.getgoods_priceinterval(result.data.goodsSeriesId);
                    }
                });
            },
            // 加载页面数据的方法-获取商品价格区间
            getgoods_priceinterval(seriers_id){
                let params1 = {
                    series_id:seriers_id
                };
                postAction(domain.publicUrl+"/logic/interface/query_goods_rungprice",Qs.stringify(params1)).then(res=>{
                    let result = res.data;
                    if(result.code==0){
                        this.is_show=0;
                        this.price_intervallist = result.data;
                    }else {
                       this.is_show=1;
                       this.price_intervallist = [];
                    }
                });
            },
            // 加载页面数据的方法-获取商品的规格
            getgoods_specifications(){
                let params1 = {
                    goods_id:this.$route.query.goods_id
                };
                postAction(domain.publicUrl+"/logic/interface/query_goods_Specifications",Qs.stringify(params1)).then(res=>{
                    let result = res.data;
                    if(result.code==0){
                        this.guige_datalist = result.data;
                        this.is_value=1;
                    }else {
                        this.guige_datalist = [];
                        this.is_value=0;
                    }
                });
            },
            // 加载页面数据的方法-获取商品的参数
            getgoods_Parameter(){
                let params1 = {
                    goods_id:this.$route.query.goods_id
                };
                postAction(domain.publicUrl+"/logic/interface/query_goods_Parameter",Qs.stringify(params1)).then(res=>{
                    let result = res.data;
                    if(result.code==0){
                        this.parameter_listData = result.data;
                    }else {
                        this.parameter_listData = [];
                    }
                });
            },
            // 加载页面数据的方法-获取商品购买数量总价格
            getgoods_buySumMoney(buySum){
                let params1 = {
                    series_id:this.series_id,
                    goods_id:this.$route.query.goods_id,
                    buysum:buySum
                };
                postAction(domain.publicUrl+"/logic/interface/query_goods_buyMoney",Qs.stringify(params1)).then(res=>{
                    let result = res.data;
                    if(result.code==0){
                       this.sum_money = result.data;
                    }else {
                        this.sum_money = '0.00';
                    }
                });
            },
            add_cart(){//加入购物车
                if(this.is_value==1){
                    if(this.buy_sum==0 || this.add_cart_canshu==[]){
                        this.$message.warning("请选择商品规格")
                        return
                    }
                }else {
                    this.buy_sum=1;
                }
                let params1 = {
                    jsondata:this.add_cart_canshu,
                    goods_id:this.$route.query.goods_id,
                    sumbuy:this.buy_sum,
                    sumMoney:this.sum_money,
                    token:localStorage.getItem("token")
                };
                postAction(domain.publicUrl+"/goods/cart/interface/add_goods_cart",Qs.stringify(params1)).then(res=>{
                    let result = res.data;
                    if(result.code==0){
                        this.$message.success("加入购物车成功")
                    }else {
                        this.$message.error(result.msg)
                    }
                });
            },
            //返回上一层
            back_top(){
                window.history.go(-1)
            }
        },
    };
</script>

<style lang="scss" scoped>
    .my-statement {
        box-sizing: border-box;
        padding: 30px 90px;
        .ms-main {
            background: #fff;
            box-sizing: border-box;
            padding: 20px 40px 30px;
            display: flex;
            .msm-left {
                width: 105px;
            }
            .msm-right {
                flex: 1;
                margin-left: 20px;
                .msmr-txt {
                    display: flex;
                    margin: 0 0 20px;
                    p {
                        font-size: 18px;
                        margin-right: 30px;
                        font-weight: 600;
                        color: #424242;

                        span {
                            color: #ce3815;
                            margin-left: 10px;
                        }
                    }
                }
                .msmr-pagination {
                    text-align: center;
                    margin: 35px 0 0;
                }
            }
        }

        .goods_p{
            color: #9c9999;
            font-size: 16px;
            margin-left: 16px;
        }
        .goods_title{
            color: #2d2d2d;
            font-size: 17px;
            margin-left: 26px;
            font-weight: bold;
            float: left;
            line-height:45px;
        }
        .goods_text{
            color: #2d2d2d;
            font-size: 15px;
            float: left;
            margin-top: 38px;
        }
        .godds_red{
            color: #f11717;
            font-size: 16px;
            float: left;
            margin-top: 38px;
            font-weight: bold;
            margin-left: 10px;
            margin-right: 10px;
        }
        .submit_cart{
            color: #2d2d2d;
            font-size: 14px;
            float: right;
            font-weight: bold;
            margin-top: 30px;
            width: 126px;
            height: 38px;
            line-height: 36px;
            text-align: center;
            background-color: #efd061;
            border-radius: 3%;
        }
    }
</style>
